
<script>
    import marked from 'marked'
    import axios from 'axios'
    export default{
        data(){
            return {
                marked:"",
                isLoading:true, // 加载中
                isLoadingErr:false // 加载失败
            }
        },
        created () {
           axios.get(this.$router.currentRoute.query.mdHref)
            .then((data)=>{
				
				// 解析 markdown 文件
                this.marked=marked(data.data)
                
                this.isLoading=false
            })
            .catch((err)=>{
            	
                this.isLoading=false
                this.isLoadingErr=true
            })
        }
    }
</script>

<template>
    <div  class="htx-article">
    	<div v-html="marked"></div>
    	<div class="loading" v-show="isLoading">
    		文章加载中，请稍后....
    	</div>
    	<div class="loading loading-err" v-show="isLoadingErr">
    		文章加载失败，请重试.....
    	</div>
    </div>
</template>


<style lang="stylus">
    @import "../css/variable.styl"

    .htx-article
        position relative
        margin 120px auto
        min-height 600px
        padding 0 40px 40px 40px
        border $part-border
        line-height 2
        width 800px
        
        .loading
        	position absolute
        	padding 20px 40px
        	background-color rgba(0,0,0,0.4)
        	font-size 18px
        	left 50%
        	top 20%
        	transform translate(-50%,-50%)
        	color #fff
</style>